<template>
    <div id="main">
            <van-search v-model="value" placeholder="" shape="round" show-action>
                <template #action>
                    <div id="one">
                        <van-tabs v-model:active="active" id="dd">
                            <van-tab title="推荐"></van-tab>
                            <van-tab title="直播"></van-tab>
                            <van-tab title="新书速递"></van-tab>
                        </van-tabs>
                        <van-icon class="ri" name="chat-o" />
                        <van-icon class="ri" name="orders-o" />
                        <van-icon class="ri" name="manager-o" />
                    </div>
                </template>
            </van-search>
    </div>
</template>

<script>
import { ref } from 'vue';
import bb from '../components/DangBody.vue';
    export default {
        setup() {
            const active = ref(1);
            return { active };
        },
        components: {
            bb,
        },
    }
</script>

<style lang="scss" scoped>
    .van-search{
        width: 20vw;
        
    }
    ::v-deep .van-field__left-icon .van-icon, .van-field__right-icon .van-icon{
        padding-left: 1vw;
    }
    ::v-deep .van-tabs__wrap{
        width: 50vw;
    }
    ::v-deep .van-tab__text--ellipsis{
        font-weight: bold;
        font-size: 3.6vw;
    }
    #main{
       width: 100%;
       background: #fff;
       #one{
            display: flex;
            .ri{
                font-size: 4.5vw;
                padding-left: 4.5vw;
                padding-top: 3.5vw;
            }
       }
    }
</style>